<template>
  <div class="platform">
    <el-card class="box-card">
      <div class="text item">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        <el-tabs>
          <el-tab-pane label="平台支出" name="first">
            <el-form label-width="100px">
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="活动名称">
                      <el-input class="platforminput" />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="活动名称">
                      <el-input class="platforminput" />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="活动名称">
                      <el-input class="platforminput" />
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="活动名称">
                      <el-input class="platforminput" />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="活动名称">
                      <el-input class="platforminput" />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="活动名称">
                      <el-button type="primary">立即创建</el-button>
                      <el-button>取消</el-button>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-button type="primary" @click="newexpendclick ">新增</el-button>
                </el-col>
              </el-row>
            </el-form>
            <el-table
              ref="multipleTable"
              :header-cell-style="{background:'#eef1f6',color:'#606266',height:'47.4px'}"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                prop="tradeType"
                label="交易类型"
                width="120"
              />
              <el-table-column
                prop="shopName"
                label="店铺名/用户名"
                width="120"
              />
              <el-table-column
                prop="order"
                label="单号"
                show-overflow-tooltip
              />
              <el-table-column
                prop="tsAmount"
                label="交易金额"
                show-overflow-tooltip
              />
              <el-table-column
                prop="date"
                label="交易时间"
                show-overflow-tooltip
              />
              <el-table-column
                fixed="right"
                label="确认退款率"
                width="200"
              >
                <template #default="{row}">
                  <el-button type="text" size="small" @click="handleClick(row)">编辑 </el-button>
                  <el-button type="text" size="small" @click="deleteClick(row)">删除 </el-button>
                  <el-button type="text" size="small">溯源分析</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              :current-page.sync="currentPage1"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <popups :newexpends.sync="newexpend" :thenewspendings="Thenewspending" @thenewspendings="platformExpenses" />
          </el-tab-pane>
          <el-tab-pane label="平台收入" name="second">
            <el-table
              ref="multipleTable"
              :header-cell-style="{background:'#eef1f6',color:'#606266',height:'47.4px'}"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                prop="tradeType"
                label="交易类型"
                width="120"
              />
              <el-table-column
                prop="shopName"
                label="店铺名/用户名"
                width="120"
              />
              <el-table-column
                prop="order"
                label="单号"
                show-overflow-tooltip
              />
              <el-table-column
                prop="tsAmount"
                label="交易金额"
                show-overflow-tooltip
              />
              <el-table-column
                prop="date"
                label="交易时间"
                show-overflow-tooltip
              />
              <el-table-column
                fixed="right"
                label="确认退款率"
                width="200"
              >
                <template #default="{row}">
                  <el-button type="text" size="small" @click="handleClick(row)">编辑 </el-button>
                  <el-button type="text" size="small" @click="deleteClick(row)">删除 </el-button>
                  <el-button type="text" size="small">溯源分析</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              :current-page.sync="currentPage1"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { platformExpense, terracedelete } from '@/api/platformExpense';
import popups from '@/components/popups';
export default {
  components: {
    popups,
  },
  data() {
    return {

      Thenewspending: {},
      newexpend: false,
      currentPage1: 1,
      tableData: [],
    };
  },
  created() {
    this.platformExpenses();
  },
  methods: {
    deleteClick(event) {
      terracedelete(event.id).then((res) => {
        this.platformExpenses();
      });
    },
    Thenewspendings() {},
    // 平台收支明细
    platformExpenses() {
      platformExpense().then((res) => {
        console.log(res);
        this.tableData = res.data.data;
      });
    },
    handleClick(row) {
      console.log(row);
      this.Thenewspending = row;
      this.newexpendclick();
    },

    // 新增点击事件
    newexpendclick() {
      this.newexpend = true;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style>
.platforminput{
  width: 200px;
};
.platform{
  padding: 0px;
};
.el-tabs__nav-wrap::after{
content: "";
}

</style>
